<template>
  <div class="header_time">
    <p>{{ date }}</p>
    <p class="data">{{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  name:'header',
  components: {},
  data() {
    return {
      currentTime:'',
      timer:''
    }
  },
  watch: {},
  computed: {
    day(){ // 显示 星期一...
      return this.dayjs().locale('zh-cn').format("dddd")
    },
    date(){ // 显示 2024年11月08日
      return this.dayjs().locale('zh-cn').format("YYYY年MM月DD日")
    }
  },
  created() {},
  mounted() {
    /* 每秒定时刷新 */
    this.timer = setInterval(() => {
      this.currentTime = this.dayjs().format("HH:mm:ss") //format("YYYY-MM-DD HH:mm:ss")
    })
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  methods:{
    async logout() {
      // 返回首页
      // this.$router.push({ path: '/' });
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: "/#/login" }).catch(() => { });
        })
      }).catch(() => {});
    }
  }
}

</script>

<style lang='scss' scoped>
.header_time{
  display: flex;
  height: 124px;
  justify-content: flex-end;
  align-items: center;
  color: #fff;
  font-size: 20px;
  padding-left: 30px;
  padding-top: 44px;
  .data{
    margin-left: 10px;
    font-size: 30px;
  }
}

</style>